import React, { useState } from 'react';
import { Route, Routes, Link } from 'react-router-dom';
import MyLayout from './views/MyLayout'
import Login from './views/Login'
import Home from './views/Home'
import About from './views/About'

function App(props) {

  return (
    <div className='app'>
      <header className='app-header'>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/login">Login</Link>
      </header>
      <div className='content'>
        <Routes>
          <Route path="/" element={<MyLayout />}>
            <Route index element={<Home />} />
            <Route path="about/:id" element={<About />} />
          </Route>
          <Route path="/login" element={<Login />} />
        </Routes>
      </div>
    </div>
  )
}

export default App;
